<template>
  <div
    class="fm-widget-view"
    v-if="element && element.key"
    :class="{ active: selectWidget.key === element.key }"
    :label="element.name"
    @click.stop="handleSelectWidget(index)"
  >
    <template>
      <div class="myMask" :style="{top: element.type === 'tabs' ? '45px' : 0}"></div>
      <LayoutCardContainer :data="data" :element="element" :design="true" v-if="!refreshFlg"/>
    </template>
    <div class="fm-widget-view-action">
      <span v-if="selectWidget.key === element.key" :title="$t('m.common.button.design')" @click.stop="handleEdit(index)"><ych-icon type="edit"/></span>
      <span v-if="selectWidget.key === element.key" :title="$t('m.common.button.setting')" @click.stop="handleWidgetOpensSet(index)"><ych-icon type="setting"/></span>
      <span v-if="selectWidget.key === element.key" :title="$t('m.common.button.tuo-dong')"> <ych-icon type="drag"/></span>
      <span v-if="selectWidget.key === element.key" :title="$t('m.common.button.copy')" @click.stop="handleWidgetClone(index)"><ych-icon type="copy"/></span>
      <span v-if="selectWidget.key === element.key" :title="$t('m.common.button.delete')" @click.stop="handleWidgetDelete(index)"><ych-icon type="delete"/></span>
      <span v-if="element.type !== 'tabs'">{{element.title}}</span>
    </div>
  </div>
</template>

<script>

import LayoutCardContainer from './LayoutCardContainer';
import {randomString} from "../../../utils/util";

export default {
  props: ['element', 'selectWidget', 'index', 'data'],
  components: {
    LayoutCardContainer
  },
  data() {
    return {
      refreshFlg: false,
    };
  },
  methods: {
    handleSelectWidget(index) {
      this.selectModel(this.data.list[index])
    },
    handleWidgetOpensSet() {
      this.$emit('handleWidgetOpensSet');
    },
    handleEdit() {
      this.$emit('handleEdit');
    },
    handleWidgetDelete(index) {
      let selectWidget = {}
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          selectWidget = {};
        } else {
          selectWidget = this.data.list[index - 1];
        }
      } else {
        selectWidget = this.data.list[index + 1];
      }
      this.selectModel(selectWidget)

      this.$nextTick(() => {
        this.data.list.splice(index, 1);
      });
    },
    handleWidgetClone(index) {
      let cloneData = {
        ...this.data.list[index],
        key: randomString(32),
        i: randomString(32)
      };

      this.data.list.splice(index, 0, cloneData);

      this.$nextTick(() => {
        this.selectModel(this.data.list[index + 1])
      });
    },
    selectModel(value) {
      this.$emit("select", value)
    }
  },
  watch: {
    'element.refreshFlg': {
      handler(value) {
        this.refreshFlg = true
        const that = this;
        setTimeout(function () {
          that.refreshFlg = false
        }, 500)
      }
    }
  }
};
</script>
<style lang="less" scoped>
.myMask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 8;
}
</style>
